<template>
  <ul class="wr-tabs">
      <li
        class="wr-tabs__item"
        v-for="(tab,index) in tabs"
        :key="index"
        :class="{'active': myValue === index}"
        @click="myValue = index">
        {{ tab }}
      </li>
      <div class="wr-tabs__line" :style="lineStyle">
        <span style="width:56px"></span>
      </div>
  </ul>
</template>

<script>
export default {
  name: 'WrTabs',
  props: {
    value: {
      type: Number,
      default: 0
    },
    tabs: {
      type: Array,
      default () {
        return [
          'a',
          'b'
        ]
      }
    }
  },
  data () {
    return {
      myValue: this.value
    }
  },
  watch: {
    myValue (newVal) {
      this.$emit('input', newVal)
    }
  },
  computed: {
    lineStyle () {
      return {
        transform: `translateX(${this.myValue * 100}%)`
      }
    }
  }
}
</script>

<style lang="scss">
@import '~@/assets/style/mixins.scss';

.wr-tabs{
  @include border-bottom;
  height: 50px;
  display: flex;
  transition: transform .2s cubic-bezier(.35,0,.25,1);
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  &__item {
    flex: 1;
    line-height: 50px;
    text-align: center;

    &.active {
      color: #ff5f16
    }
  }
  &__line {
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 2px;
    transition: transform 0.3s ease-in;

    span {
      background: #ff5f16;
    }
  }
}
</style>
